<template>
  <!-- 空海运管理列表 -->
  <customContainer :config="config" />
</template>
<script setup lang="ts">
import { reactive, markRaw, ref } from 'vue'
import { Calendar, UploadFilled } from '@element-plus/icons-vue'
import { ElButton, ElMessageBox } from 'element-plus'

import { DictDirection } from '@/store/modules/dicts'

const config = reactive({
  query: {
    fields: [
      {
        label: '客户订单号',
        prop: 'customerNo',
        option: {
          type: 'textarea',
        },
      },
      {
        label: '提单号',
        prop: 'ladingNo',
        option: {
          type: 'textarea',
        },
      },
      {
        type: 'select',
        label: '运输类型',
        prop: 'transportType',
        option: {
          dictInfo: { dict: DictDirection.是否禁用字典 },
        },
      },

      {
        label: '服务商',
        prop: 'agent',
      },
      {
        label: '委托单位',
        prop: 'customerCode',
      },
      {
        label: '航次/航班号',
        prop: 'flightNumber',
      },
      {
        label: '起运港',
        prop: 'portOfDeparture',
      },

      {
        label: '目的港',
        prop: 'portOfDestination',
      },

      {
        type: 'date-picker',
        label: '起飞时间',
        prop: 'datetimePicker',
        option: {
          type: 'datetime',
        },
      },
      {
        label: '航空/船公司',
        prop: 'airlineCompany',
      },
      {
        type: 'select',
        label: '订单状态',
        prop: 'splittingStatus',
        option: {
          dictInfo: { dict: DictDirection.是否禁用字典 },
        },
      },
    ],
    queryParams: {
      pageSize: 10,
      pageNum: 1,
      customerNo: undefined,
      transportType: undefined,
      ladingNo: undefined,
      agent: undefined,
      customerCode: undefined,
      flightNumber: undefined,
      portOfDeparture: undefined,
      portOfDestination: undefined,
      airlineCompany: undefined,
      splittingStatus: undefined,
    },
    formOption: {},
  },
  btns: [
    {
      title: '配舱',
      // directives: [['hasPermi', ['订单'], 'arg']],
      onClick(e) {
        console.log(e)
      },
      type: 'primary',
    },
    {
      title: '修改',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '签出',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'success',
    },
    {
      title: '删除',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'info',
    },
    {
      title: '国内查验',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '国内报关',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '国内已放行',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '已到港',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'success',
    },
    {
      title: '国外查验',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '国外清关',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '国外清关已放行',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '已提柜',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '提重柜',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '还空柜',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '导出',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'warning',
    },
    {
      title: '导出空派清关资料',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'success',
    },
    {
      title: '空运导出委托书',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
    {
      title: '海运导出委托书',
      // directives: [['hasPermi', ['2'], 'arg']],
      onClick() {
        console.log(config)
      },
      type: 'primary',
    },
  ],
  table: {
    columns: [
      { type: 'selection', width: '55' },
      { label: '提单号', prop: 'ladingNo' },
      { label: '报价编号', prop: 'quotationNo' },
      { label: '委托单位', prop: 'customerName' },
      { label: '客户单号', prop: 'customerNo' },
      { label: '贸易条款', prop: 'tradeTerms' },
      { label: '服务类型', prop: 'serviceType' },
      { label: '服务商简称', prop: 'agent' },
      { label: '服务渠道', prop: 'serviceChannelCode' },
      { label: '状态', prop: 'splittingStatus' },
      { label: '运输类型', prop: 'transportType' },
      { label: '订舱管理', prop: 'bookingManagement' },
      { label: '国外代理', prop: 'foreignAgent' },
      { label: '航空公司', prop: 'airlineCompany' },
      { label: '货值', prop: 'valueGoods' },
      { label: 'classNo号', prop: 'classno' },
      { label: '起飞时间', prop: 'departureTime' },
      { label: '预计排仓时间', prop: 'estimatedArrangementTime' },
      { label: '起运港', prop: 'portOfDeparture' },
      { label: '目的港', prop: 'portOfDestination' },
      { label: '卸货港', prop: 'portOfDischarge' },
      { label: '中转港代码', prop: 'transitPortCode' },
      { label: '主单号', prop: 'masterOrderNo' },
      { label: '分单号', prop: 'subOrderNo' },
      { label: '航班号', prop: 'flightNumber' },
      { label: 'ETD', prop: 'etd' },
      { label: '截单时间', prop: 'cutOffTime' },
      { label: '发货人', prop: 'consignor' },
      { label: '收货人', prop: 'consignee' },
      { label: '通知人1', prop: 'notifier1' },
      { label: '通知人2', prop: 'notifier2' },
      { label: '唛头', prop: 'shippingMark' },
      { label: '英文品名', prop: 'englishName' },
      { label: '付款方式', prop: 'paymentMethod' },
      { label: '运输条款', prop: 'transportClause' },
      { label: '提单形式', prop: 'ladingForm' },
      { label: '总件数', prop: 'receivingTotal' },
      { label: '总实重', prop: 'receivingTotalWeight' },
      { label: '总体积重', prop: 'receivingTotalWood' },
      { label: '总计费重', prop: 'receivingTotalCharging' },
      { label: '订舱备注', prop: 'bookingRemarks' },
      { label: '配舱备注', prop: 'cabinRemarks' },
      { label: '操作备注', prop: 'operationRemarks' },
      { label: '创建人', prop: 'createUser' },
      { label: '创建时间', prop: 'createDate' },
      { label: '业务员', prop: 'salesman' },
      { label: '客服员', prop: 'customerServiceStaff' },

      {
        label: '操作',
        render(h, params) {
          return h(
            ElButton,
            {
              text: true,type: 'primary',
              onClick: () => {
                console.log(params)
              },
            },
            {
              default: () => '操作',
            },
          )
        },
      },
    ],
    event: {
      onRowClick(e) {
        console.log(e)
      },
    },
  },
  api: '',

  requestTrans: (q) => {
    console.log(q)
    return q
  },
})
</script>
<style lang="less" scoped></style>
